<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example: MultiIconMarker</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQGj0PqsCtxKvarsoS-iqLdqZSKfxRdmoPmGl7Y9335WLC36wIGYa6o5Q" type="text/javascript"></script>
    <script type="text/javascript">
    document.write('<script type="text/javascript" src="../src/multiiconmarker'+(document.location.search.indexOf('packed')>-1?'_packed':'')+'.js"><'+'/script>');
  </script>
    <script type="text/javascript">
    
    function initialize() {
      if (GBrowserIsCompatible()) {
        var mapCenterPos = new GLatLng(37.4419, -122.1419);
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(mapCenterPos, 14);
        
        // Add 10 markers to the map at random locations
        var bounds = map.getBounds();
        var southWest = bounds.getSouthWest();
        var northEast = bounds.getNorthEast();
        var lngSpan = northEast.lng() - southWest.lng();
        var latSpan = northEast.lat() - southWest.lat();
        for (var i = 0; i < 10; i++) {
          var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
                                  southWest.lng() + lngSpan * Math.random());
          var pegman = new createPegman(point);
          map.addOverlay(pegman);
        }
        pegman.openInfoWindow("Please, drag me!");
      }
    }
    function createPegman(latlng){
        //default icon
        var pegmanIcon = new GIcon();
        pegmanIcon.image = "http://maps.google.com/mapfiles/cb/pegman.png";
        pegmanIcon.iconSize = new GSize(49, 52);
        pegmanIcon.iconAnchor = new GPoint(24, 34);
        pegmanIcon.infoWindowAnchor = new GPoint(18, 11);
        pegmanIcon.sprite = { top : 0, left : 0};
        
        //create MultiImageMarker
        var pegmanMarker = new MultiIconMarker(latlng, {icon: pegmanIcon, draggable:true});
                
        //drag to left
        var icon = new GIcon(pegmanIcon);
        icon.image = "http://maps.google.com/mapfiles/cb/pegman.png";
        icon.sprite = {"left":0, "top":17*pegmanIcon.iconSize.height};
        pegmanMarker.addIcon(icon, "dragLeft", "dragend");
        
        //drag to right
        var icon = new GIcon(pegmanIcon);
        icon.image = "http://maps.google.com/mapfiles/cb/pegman.png";
        icon.sprite = {"left":0, "top":18*pegmanIcon.iconSize.height};
        pegmanMarker.addIcon(icon, "dragRight","dragend");
        
        GEvent.addListener(pegmanMarker, "dragstart", function(){
            pegmanMarker.closeInfoWindow();
            pegmanMarker.lng_ = pegmanMarker.getLatLng().lng();
        });
        GEvent.addListener(pegmanMarker, "drag", function(){
          var beforeLng = pegmanMarker.lng_;
          var currentLng = pegmanMarker.getLatLng().lng();
          pegmanMarker.lng_ = currentLng;

          var dragDirection = beforeLng-currentLng;
          var eventName="";
          if(dragDirection>0){
            eventName = "dragLeft";
          }else{
            eventName = "dragRight";
          }
          
          GEvent.trigger(pegmanMarker, eventName);
        });
        return pegmanMarker;
    }

    </script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 500px; height: 500px"></div>
  </body>
</html>

